<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%session.setAttribute("user-list",true);%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>用户管理 - 角色列表</title>

<!-- Bootstrap core CSS -->
<link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath}/static/css/layout.css" rel="stylesheet">
</head>

<body>
	<!-- 头部 -->
	<jsp:include page="header.jsp" />

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<jsp:include page="navibar.jsp" />
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h1 class="page-header">角色列表</h1>
				<div class="row placeholders">
					<div>
						<button type="button" class="btn btn-warning delete-query" data-toggle="modal" data-target="#delete-confirm-dialog">删除所选</button>
						<!--  删除所选对话框 -->
						<div class="modal fade " id="delete-confirm-dialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
							<div class="modal-dialog modal-sm" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<h4 class="modal-title">警告</h4>
									</div>
									<div class="modal-body">确认删除所选角色吗</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
										<button type="button" class="btn btn-primary delete-selected-confirm">确认</button>
									</div>
								</div>
							</div>
						</div>
						<button type="button" class="btn btn-default show-add-form" data-toggle="modal" data-target="#role-form-div">添加新角色</button>
						<!--添加新角色表单-->
						<div class="modal fade " id="role-form-div" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
							<div class="modal-dialog modal-md" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
										<h4 class="role-form-title"></h4>
									</div>
									<div class="modal-body">
										<form class="role-form">
											<input type="hidden" name="roleId" class="form-control" id="roleIdInput">
											<div class="form-group">
												<label for="roleNameInput">名称</label> <input type="text" name="roleName" class="form-control" id="roleNameInput" placeholder="角色名">
											</div>
											<div class="form-group">
												<label for="descInput">描述</label> <input type="text" name="roleDesc" class="form-control" id="descInput" placeholder="角色描述">
											</div>
											<div class="form-group">
												<label for="codeInput">代码</label> <input type="text" name="roleCode" class="form-control" id="codeInput" placeholder="角色代码">
											</div>
											<div class="form-group">
												<label>设置权限</label>
												<div class="perm-inputs"></div>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
										<button type="button" class="btn btn-primary role-submit"></button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="space-div"></div>
					<table class="table table-hover table-bordered role-list">
						<tr>
							<td><input type="checkbox" class="select-all-btn" /></td>
							<td>ID</td>
							<td>名称</td>
							<td>描述</td>
							<td>代码</td>
							<td>拥有权限</td>
							<td>操作</td>
						</tr>
						<!--  <tr>
                	<td><input type="checkbox" name="roleIds"/></td>
                    <td class="roleid">11</td>
                    <td>用户管理员</td>
                    <td>用户管理</td>
                    <td>user_admin</td>
                    <td><a href="javascript:void(0);" class="show-role-perms" >查看所有权限</a></td>
                    <td><a class="glyphicon glyphicon-pencil show-roleinfo-form" aria-hidden="true" title="修改角色信息" href="javascript:void(0);" data-toggle="modal" data-target="#role-form"></a>
                    	<a class="glyphicon glyphicon-remove delete-this-role" aria-hidden="true" title="删除角色" href="javascript:void(0);"></a></td>
                </tr>-->
						<c:forEach items="${roles }" var="role">
							<tr>
								<td><input type="checkbox" name="roleIds" value="${role.roleId }" /></td>
								<td class="roleid">${role.roleId }</td>
								<td>${role.roleName }</td>
								<td>${role.roleDesc }</td>
								<td>${role.roleCode }</td>
								<td><a href="javascript:void(0);" class="show-role-perms">查看所有权限</a></td>
								<td><a class="glyphicon glyphicon-pencil show-roleinfo-form" aria-hidden="true" title="修改角色信息" href="javascript:void(0);"
									data-toggle="modal" data-target="#role-form-div"></a> <a class="glyphicon glyphicon-remove delete-this-role" aria-hidden="true" title="删除角色"
									href="javascript:void(0);"></a></td>
							</tr>
						</c:forEach>
					</table>

				</div>
			</div>
		</div>
	</div>
	<!-- 提示框 -->
	<div class="modal fade" id="op-tips-dialog" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">提示信息</h4>
				</div>
				<div class="modal-body" id="op-tips-content"></div>
			</div>
		</div>
	</div>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
	<script>
		function showTips(contents) {
			$("#op-tips-content").html(contents);
			$("#op-tips-dialog").modal("show");
		}
		function resetRoleForm(title, button) {
			$(".role-form input[type='text']").val("");
			$(".role-form input[type='checkbox']").prop("checked", false);
			$(".role-form-title").html(title);
			$(".role-submit").html(button);
		}
		function getAllPerms(obj) {
			obj.html("");
			$.ajax({
				url : "listperms.html",
				async : false,
				type : "POST",
				dataType : "json",
				success : function(data) {
					for ( var i in data) {
						obj.append('<input type="checkbox" name="permIds" value="'+
								data[i].permissionId+'"/>' + data[i].permissionDesc + ':');
						if (data[i].isNavi === 1) {
							obj.append('<font color="red">导航结点</font>');
						} else {
							obj.append("非导航结点");
						}
						obj.append("<br/>");
					}
				}
			});
		}
		$(".select-all-btn").change(function() {
			if ($(this).is(":checked")) {//$(this).prop("checked")
				$(".role-list input[type='checkbox']:gt(0)").prop("checked", true);
			} else {
				$(".role-list input[type='checkbox']:gt(0)").prop("checked", false);
			}
		});
		$(".delete-selected-confirm").click(function() {
			$("#delete-confirm-dialog").modal("hide");
			var cbs = $("input[name='roleIds']:checked")
			if (cbs.length === 0) {
				showTips("没有选中任意项！");
			} else {
				var roleIds = new Array();
				$.each(cbs, function(i, perm) {
					roleIds[i] = perm.value;
				});
				//请求删除所选角色
				$.ajax({
					url : "deletemore.html",
					data : {
						roleIds : roleIds
					},
					type : "POST",
					traditional : true,
					success : function() {
						cbs.parent().parent().remove();
						showTips("删除所选成功！");
					}
				});
			}
		});
		$(".show-add-form").click(function() {
			resetRoleForm("添加新角色", "添加");
			getAllPerms($(".perm-inputs"));
		});
		function getPermsByRoleId(roleId, doSuccess) {
			$.ajax({
				url : "showroleperms.html",
				data : {
					roleId : roleId
				},
				type : "POST",
				dataType : "json",
				success : function(data) {
					doSuccess(data);
				}
			});
		}
		$(".role-list").on("click", ".show-role-perms", function() {
			var roleId = $(this).parents("tr").find(".roleid").html();
			var rlTd = $(this).parent();
			//请求查看用户角色
			getPermsByRoleId(roleId, function(data) {
				rlTd.html("");
				for ( var i in data) {
					var role = data[i].permissionDesc + "<br/>";
					rlTd.append(role);
				}
			});
		});
		$(".role-list").on("click", ".show-roleinfo-form", function() {
			getAllPerms($(".perm-inputs"));
			resetRoleForm("更新角色信息", "更新");
			var roleId = $(this).parents("tr").find(".roleid").html();
			$("input[name='roleId']").val(roleId);
			$.ajax({
				url : "getrole.html",
				data : {
					roleId : roleId
				},
				type : "POST",
				dataType : "json",
				success : function(data) {
					$("input[name='roleName']").val(data.roleName);
					$("input[name='roleDesc']").val(data.roleDesc);
					$("input[name='roleCode']").val(data.roleCode);
				}
			});
			getPermsByRoleId(roleId, function(data) {
				for ( var i in data) {
					$('.role-form input[name="permIds"][value="' + data[i].permissionId + '"]').prop("checked", true);
				}
			});
		});
		$(".role-submit")
				.click(
						function() {
							if ($(this).html() === "添加") {
								//请求添加新角色
								$
										.ajax({
											url : "add.html",
											type : "POST",
											data : $(".role-form").serialize(),
											dataType : "json",
											success : function(data) {
												$("#role-form-div").modal("hide");
												showTips("添加成功！");

												var newTr = '<tr>'
														+ '<td><input type="checkbox" name="roleIds" value="'+data.roleId+'"/></td>'
														+ '<td class="roleid">'
														+ data.roleId
														+ '</td>'
														+ '<td>'
														+ data.roleName
														+ '</td>'
														+ '<td>'
														+ data.roleDesc
														+ '</td>'
														+ '<td>'
														+ data.roleCode
														+ '</td>'
														+ '<td><a href="javascript:void(0);" class="show-role-perms" >查看所有权限</a></td>'
														+ '<td><a class="glyphicon glyphicon-pencil show-roleinfo-form" aria-hidden="true" title="修改角色信息" href="javascript:void(0);" data-toggle="modal" data-target="#role-form-div"></a> '
														+ '<a class="glyphicon glyphicon-remove delete-this-role" aria-hidden="true" title="删除角色" href="javascript:void(0);"></a></td>' + '</tr>';
												$(".role-list tr").eq(0).after(newTr);
											}
										});
							} else {
								//更新角色信息
								$.ajax({
									url : "updaterole.html",
									data : $(".role-form").serialize(),
									type : "POST",
									success : function() {
										$("#role-form-div").modal("hide");
										showTips("更新成功！");
									}
								});
							}
						});
		$(".role-list").on("click", ".delete-this-role", function() {
			var roleTr = $(this).parents("tr");
			var roleId = roleTr.find(".roleid").html();
			if (confirm('确认删除ID为"' + roleId + '"的角色吗？')) {
				//请求删除该用户
				$.ajax({
					url : "delete.html",
					data : {
						roleId : roleId
					},
					type : "POST",
					success : function() {
						roleTr.remove();
						showTips("删除成功！");
					}
				});
			}
		});
	</script>
</body>
</html>